<template>
  <div class="app-container pagination">
    <el-card>
      <div class="header">
        <!--<span style="margin-right: 20px;"><strong>导航栏显示样式</strong></span>
        <el-radio-group v-model="navbarShowMode" @change="toSetNavbarShowMode">
          <el-radio label="SINGLE_LINE">单行显示</el-radio>
          <el-radio label="FOUR_ITEM_LINE">每行显示4个导航图标</el-radio>
          <el-radio label="THREE_ITEM_LINE">每行显示3个导航图标</el-radio>
        </el-radio-group>-->
        <router-link to="./add">
          <el-button type="primary">添加导航项</el-button>
        </router-link>
      </div>
      <ws-pagination v-model="pagination">
        <el-table-column label="图标" width="280" header-align="center" align="center">
          <template slot-scope="scope">
            <ws-img :src="scope.row['iconUrl']" style="width: 60px;height: 60px;"/>
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题" min-width="180" header-align="center" align="center"/>
        <el-table-column prop="imageSize" label="图片尺寸" min-width="140" header-align="center" align="center"/>
        <el-table-column prop="url" label="跳转路径" min-width="250" header-align="center" align="center">
          <template slot-scope="scope">
            {{ scope['row']['pageName'] }}（{{ scope['row']['url']?scope['row']['url']:'--' }}）
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="权重" min-width="100" header-align="center" align="center"/>
        <el-table-column prop="status" label="状态" width="120" header-align="center" align="center">
          <template slot-scope="scope">
            <div @click="changeStatus(scope.row)">
              <el-tag :type="scope.row.status===1?'success':'info'" class="cursor-pointer">{{ scope.row.status===1?'已启用':'已禁用' }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="160" header-align="center" align="center">
          <template slot-scope="scope">
            <!--编辑-->
            <router-link :to="`./edit?id=${scope['row']['id']}`">
              <el-button size="small" type="primary" icon="el-icon-edit" circle/>
            </router-link>
            <!--删除-->
            <el-button size="small" type="danger" icon="el-icon-delete" circle @click="deleteRow(scope['row'])"/>
          </template>
        </el-table-column>
      </ws-pagination>
    </el-card>
  </div>
</template>

<script>
  export default {
    name: 'HomepageModelList',
    components: {},
    data() {
      return {
        // 查询条件
        search: {
          // 分类名
          name: ''
        },
        // 导航栏显示样式
        navbarShowMode: 'SINGLE_LINE',
        pagination: {}
      }
    },
    watch: {},
    created() {
      // 初始化分页器
      this.initPagination();
      // 获取导航栏显示样式
      this.loadNavbarShowMode();
    },
    methods: {
      // 初始化分页器
      initPagination() {
        // 创建分页器
        this.pagination = new this.$pagination(async (...args) => {
          // 加载分页列表
          const result = await this.$service.applicationGetMenuList({...args[0], search: this.search.name});
          // const result = await this.$service.applicationToRequestWxCloudApi({
          //   ...args[0],
          //   action: 'getMenu',
          //   params: JSON.stringify({
          //     'filter': {},
          //     'sort': {
          //       'fieldName': 'create_time',
          //       'order': 'desc'
          //     }
          //   })
          // });
          if (result.code !== 0) {
            return this.$message.error(result.msg || '系统错误');
          }
          return result;
        });
        // 加载分页数据
        this.pagination.load();
      },
      // 删除指定行
      deleteRow({id}) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          callback: async (confirm) => {
            if (confirm === 'confirm') {
              // 创建一级分类
              const result = await this.$service.applicationDeleteMenu({id: id});
              // const result = await this.$service.applicationToRequestWxCloudApi({
              //   action: 'deleteMenu',
              //   params: JSON.stringify({_id: _id})
              // });
              if (result.code === 0) {
                this.$message.success(`删除成功~`);
                // 加载分页数据
                this.pagination.load();
              } else {
                this.$message.error(result.msg);
              }
            }
          }
        });
      },
      // 切换上下架状态
      changeStatus({id, status}) {
        this.$confirm(`你确定要${status === 1 ? '禁用' : '启用'}这个导航菜单吗?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          callback: async (confirm) => {
            if (confirm === 'confirm') {
              const result = await this.$service.applicationSetMenuStatus({
                id: id,
                status: status === 1 ? 0 : 1
              });
              // const result = await this.$service.applicationToRequestWxCloudApi({
              //   action: 'updateMenuStatus',
              //   params: JSON.stringify({
              //     _id: _id,
              //     status: status === 1 ? 2 : 1
              //   })
              // });
              if (result.code === 0) {
                this.$message.success(`${status === 1 ? '禁用' : '启用'}成功~`);
                // 加载分页数据
                this.pagination.load();
              } else {
                this.$message.error(result.msg);
              }
            }
          }
        });
      },

      // 获取导航栏显示样式设置
      loadNavbarShowMode() {
        (async () => {
          const result = await this.$service.applicationGetWxAppTitle();
          // const result = await this.$service.applicationToRequestWxCloudApi({action: 'getWxappStyle'});
          if (result.code === 0) {
            this.navbarShowMode = result.data['navbarShowMode'] || 'SINGLE_LINE';
          }
        })();
      },
      // 修改导航栏显示样式
      toSetNavbarShowMode() {
        (async () => {
          const params = {navbarShowMode: this.navbarShowMode}
          const result = await this.$service.applicationSaveWxAppTitle(params);
          // const result = await this.$service.applicationToRequestWxCloudApi({
          //   action: 'updateWxappStyle',
          //   params: JSON.stringify(params)
          // });
          if (result.code === 0) {
            this.$message.success('操作成功~');
          } else {
            this.$message.error(result.msg);
            this.navbarShowMode = 'SINGLE_LINE';
          }
        })();
      }
    }
  }
</script>

<style lang="scss" type="text/scss" scoped>
  .pagination {
    .header {
      .search-input {
        width: 240px;
      }
    }
  }

  .el-tag {
    margin: 0 5px;
  }
</style>
